@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/goods/details.css')}}">

@section('content')
<div class="main" id="details">
    <div class="details_header">
        <div class="details_header_swiper">
            <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                    <div v-for="item in goodsDetials.images" class="swiper-slide" :style="{backgroundImage:'url('+item+')'}"></div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
            </div>
            <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                    <div v-for="item in goodsDetials.images" class="swiper-slide" :style="{backgroundImage:'url('+item+')'}"></div>
                </div>
            </div>

        </div>
        <div class="details_header_mes">
            <div>
                <p class="details_name">
                    <span class="nameDetails">@{{goodsDetials.title}}</span>
                    <span @click="isCollect" v-if="goodsDetials.is_collect==1" class='soucangS'><img src="{{URL::asset('./img/huixing.png')}}">收藏</span>
                    <span @click="isCollect" v-else class='soucangS'><img src="{{URL::asset('./img/xingxing.png')}}"></span>
                </p>
                <p class="details_name" style="margin-top:56px;">
                    <span class="jiage">
                        <a>价格：</a>
                        <span>
                            ￥
                        </span>
                        @{{goodsDetials.price}}
                    </span>
                    <button class="shopping" @click=" window.location.href = '{{ route('home.order.sureOrder') }}?goodsId='+goodsDetials.id+'&num='+goodsNum+'&type='+goodsDetials.type+'&ifcart=0'">立即购买 </button>
                </p>
                <p class="details_name">
                    <span class='details_title_ss'>
                        <a>评分：</a>
                        <img v-for="item in goodsDetials.star" src="{{URL::asset('./img/xingxing.png')}}">
                    </span>
                </p>
                <p class="details_name">
                    <span style="display:flex; align-items: center;">
                        <a class='details_title_ss_a'>数量：</a>
                        <span class="details_title_ss_div">
                            <span class="jian" @click="addGoodsNum('-')">
                                <img src="{{URL::asset('./img/icon/jian.png')}}">
                            </span>
                            <span class="contentNum">@{{goodsNum}}</span>
                            <span class="jia" @click="addGoodsNum('+')">
                                <img src="{{URL::asset('./img/icon/jia.png')}}">
                            </span>
                        </span>
                    </span>
                    <button class="shopping" style="background:#F49423" @click="addShoping">加入购物车 </button>
                </p>
            </div>
            <div class="fuwuMes">
                <p>
                    <img src="{{URL::asset('./img/icon/protect.png')}}">
                    验收满意后，在付款给供应商
                </p>
                <p>
                    <img src="{{URL::asset('./img/icon/serve.png')}}">
                    所有服务商，100%实名认证
                </p>
                <p>
                    <img src="{{URL::asset('./img/icon/cost.png')}}">
                    承诺不向雇主收取任何费用
                </p>
                <span>
                    为保障您的资金安全，请勿相信供应商任何理由的线下交易行为。
                </span>
            </div>
        </div>
    </div>
    <div class="details_content">
        <div class="details_content_left">
            <div class="content_title">
                <span :class="{active:evaluateBol}" @click="setevaluateBol(true)">详细信息</span>
                <span :class="{active:!evaluateBol}" @click='setevaluateBol(false)'>交易评价<a>(@{{goodsDetials.avg_good}}%)</a></span>
            </div>
            <div class="content_main" v-if="evaluateBol">
                @{{goodsDetials.content}}
            </div>
            <div class="pingjia" v-else v-loading="loading1">
                <div class="companyTransaction_details">
                    <div class="TransactionHeader">
                        <div class="tsHeader">
                            <div :class="{active:evaluatesType==1}" @click="changeEvaluates(1)">
                                <img src="{{URL::asset('./img/store/well.png')}}" alt="">
                                <span>好评数<a>@{{goodsDetials.good}}</a></span>
                            </div>
                            <div :class="{active:evaluatesType==2}" @click="changeEvaluates(2)">
                                <img src="{{URL::asset('./img/store/middle.png')}}" alt="">
                                <span>中评数<a>@{{goodsDetials.middle}}</a></span>
                            </div>
                            <div :class="{active:evaluatesType==3}" @click="changeEvaluates(3)">
                                <img src="{{URL::asset('./img/store/bad.png')}}" alt="">
                                <span>差评数<a>@{{goodsDetials.bad}}</a></span>
                            </div>
                        </div>
                        <div class="tsMain">
                            <div v-for="item in goodsEvaluates">
                                <span class="userMes">
                                    <img :src="item.user_avatar">
                                    <a>@{{item.user_name}}</a>
                                </span>
                                <span class="userEvaluate">
                                    <span>
                                        <span class="userMes_case">
                                            <!-- <span>业务名称业务名称业务名称</span> -->
                                            <i class="tri" v-for="it in item.average_star"></i>
                                            <a>（@{{item.average_star}}分）</a>
                                        </span>
                                        <span>@{{item.created_at}}</span>
                                    </span>
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="elementPage" v-if="pageCount>0" style="margin:0 20px;margin-top:10px;padding-bottom:20px;border-bottom:1px solid #cccccc">
                    <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
                    </el-pagination>
                </div>
                <div class="editorEvaluates">
                    <span>请点击星星打分</span>
                    <p>
                        <span>
                            <img v-for="(item,index) in workPac.T" @click="workPcT(index)" src="{{URL::asset('./img/store/xingxing.png')}}">
                            <img v-for="(item,index) in workPac.F" @click="workPcF(index)" src="{{URL::asset('./img/store/huixing.png')}}">
                        </span>
                        <!-- <span>工作质量
                            <img v-for="(item,index) in workContent.T" @click="workContentT(index)" src="{{URL::asset('./img/store/xingxing.png')}}">
                            <img v-for="(item,index) in workContent.F" @click="workContentF(index)" src="{{URL::asset('./img/store/huixing.png')}}">
                        </span>
                        <span>工作态度
                            <img v-for="(item,index) in workManner.T" @click="workMannerT(index)" src="{{URL::asset('./img/store/xingxing.png')}}">
                            <img v-for="(item,index) in workManner.F" @click="workMannerF(index)" src="{{URL::asset('./img/store/huixing.png')}}">
                        </span> -->
                    </p>
                    <textarea placeholder="请输入您的评价......" v-model="content"></textarea>
                    <button @click="setEvaluates">发表评价</button>
                </div>
            </div>
        </div>
        <div class="details_content_right">
            <div class="showStore">
                <img :src="goodsDetialsStore.logo" alt="">
                <span class='showStore_name'>
                    @{{goodsDetialsStore.store_name}}
                    <img v-if="goodsDetialsStore.quality==2" src="{{URL::asset('./img/icon/storeColloct.png')}}" alt="">
                    <img v-if="goodsDetialsStore.hot==2" src="{{URL::asset('./img/icon/storeHot.png')}}" alt="">
                </span>
                <p class="showStore_grade">
                    好评率：@{{goodsDetialsStore.credit}}
                </p>
                <div class="showStore_button">
                    <button style="position:relative" @click.stop="goodsDetialsStore.bool=true">
                        联系TA
                        <div class="listButtonDialog" v-show="goodsDetialsStore.bool" @click.stop="goodsDetialsStore.bool=false">
                            <div class="listButtonDialog_img">
                                <span>
                                    <img src="{{URL::asset('./img/store/listButtonDialog_img.png')}}" alt="">
                                    @{{goodsDetialsStore.master_phone}}
                                </span>
                                <p class="listButtonDialog_name"> @{{goodsDetialsStore.master_name}}</p>
                                <!-- <p class="listButtonDialog_tel">
                                    电话接通率：<a>
                                        100%
                                    </a>
                                </p> -->
                            </div>
                            <div class="listButtonDialog_QRcode">
                                <img src="{{URL::asset('./img/store/dialogTelbigQR.png')}}" alt="">
                                <span>扫码快速拨打电话</span>
                                <a>X</a>
                            </div>
                        </div>
                    </button>
                    <button v-if="goodsDetialsStore.store_collect==2" @click="storeCollect(goodsDetialsStore.id)" style="color: #cccc;border-color: #ccc;">已收藏</button>
                    <button v-else @click="storeCollect(goodsDetialsStore.id)">收藏店铺</button>
                </div>
            </div>
            <div class='detailsRightMain'>
                <div class='detialsRightTitle'>
                    <img src="{{URL::asset('./img/icon/recommend.png')}}">
                    同类型的推荐商品
                </div>
                <div class="stroreListDetails" v-for="(item,index) in RightHotGoods">
                    <img :src="item.thumb">
                    <div>
                        <span>@{{item.title}}</span>
                        <div>
                            <p class="stroreListDetailsP">
                                <span>
                                    <img src="{{URL::asset('./img/icon/eyered.png')}}">
                                    @{{item.view}}
                                </span>
                                <span>
                                    ￥<a>@{{item.price}}</a>
                                </span>
                            </p>
                        </div>
                    </div>
                    <button @click=" window.location.href = '{{ route('home.goods.goodsDetails') }}?goodsId='+item.id+'&stairClassify='+stairClassify+'&type='+goodsType">查看</button>
                </div>
            </div>
        </div>
    </div>
    <el-dialog :visible.sync="centerDialogVisible" width="508px" center>
        <div class="dialogMes">
            <img src="{{URL::asset('./img/icon/paying.png')}}" alt="">
            <span>商品已加入购物车</span>
        </div>
    </el-dialog>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let app = new Vue({
            el: '#details',
            data: () => {
                return {
                    evaluatesType: 1,
                    goodsNum: 1,
                    pageNumber: 1,
                    pageCount: 0,
                    centerDialogVisible: false,
                    goodsId: getQueryString("goodsId") || '',
                    stairClassify: getQueryString("stairClassify") || '',
                    goodsType: getQueryString("type") || '',
                    evaluateBol: true,
                    goodsDetials: {},
                    goodsDetialsStore: {},
                    goodsEvaluates: [],
                    workPac: {
                        T: 0,
                        F: 5,
                    },
                    workContent: {
                        T: 0,
                        F: 5,
                    },
                    workManner: {
                        T: 0,
                        F: 5,
                    },
                    content: '',
                    RightHotGoods: [],
                    loading1: false,
                }
            },
            created() {
                this.getDetails();
                this.getRightHotGoods();
            },
            mounted() {


            },
            methods: {
                getDetails() {
                    let data = {
                        id: this.goodsId,
                        type: this.evaluatesType,
                        page: this.pageNumber,
                    }
                    this.loading1 = true;
                    apiAjax("{{ route('home.goods.goodsDetailsApi')}}", 'get', data, (res) => {
                        this.loading1 = false;
                        if (res.code == 0) {
                            this.goodsDetials = res.data;
                            this.goodsDetialsStore = res.data.store;
                            this.goodsEvaluates = res.data.evaluates.data;
                            this.pageCount = res.data.evaluates.total;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {
                        this.loading1 = false;

                    });
                },
                getRightHotGoods() {
                    let data = {
                        cid: this.stairClassify,
                        type: this.goodsType,
                    }
                    apiAjax("{{ route('home.goods.detailsRightHotGoodsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.RightHotGoods = res.data;
                            var galleryThumbs = new Swiper('.gallery-thumbs', {
                                spaceBetween: 10,
                                slidesPerView: 4,
                                loop: true,
                                freeMode: true,
                                loopedSlides: 5,
                                watchSlidesVisibility: true,
                                watchSlidesProgress: true,
                            });
                            var galleryTop = new Swiper('.gallery-top', {
                                spaceBetween: 10,
                                loop: true,
                                loopedSlides: 5,
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },
                                thumbs: {
                                    swiper: galleryThumbs,
                                },
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                //商品收藏
                isCollect() {
                    let storeDetailData = {
                        collect_id: this.goodsDetials.id
                    }
                    apiAjax("{{ route('home.goods.goodsCollectApi')}}", 'post', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getDetails()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                //供应商收藏
                storeCollect(id) {
                    let storeDetailData = {
                        collect_id: id
                    }
                    apiAjax("{{ route('home.store.storeCollectApi')}}", 'post', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getDetails()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },

                handleCurrentChange(val) {
                    this.pageNumber = val;
                },
                changeEvaluates(type) {
                    this.evaluatesType = type;
                    this.getDetails();
                },
                setevaluateBol(obj) {
                    this.evaluateBol = obj
                },
                //工作速度
                workPcT(index) {
                    this.workPac.T = index + 1
                    this.workPac.F = 5 - this.workPac.T
                },
                workPcF(index) {
                    if (this.workPac.T != 0) {
                        this.workPac.T = this.workPac.T + index + 1
                    } else {
                        this.workPac.T = index + 1
                    }
                    this.workPac.F = 5 - this.workPac.T
                },
                //工作质量
                workContentT(index) {
                    this.workContent.T = index + 1
                    this.workContent.F = 5 - this.workContent.T
                },
                workContentF(index) {
                    if (this.workContent.T != 0) {
                        this.workContent.T = this.workContent.T + index + 1
                    } else {
                        this.workContent.T = index + 1
                    }
                    this.workContent.F = 5 - this.workContent.T
                },
                //工作态度
                workMannerT(index) {
                    this.workManner.T = index + 1
                    this.workManner.F = 5 - this.workManner.T
                },
                workMannerF(index) {
                    if (this.workManner.T != 0) {
                        this.workManner.T = this.workManner.T + index + 1
                    } else {
                        this.workManner.T = index + 1
                    }
                    this.workManner.F = 5 - this.workManner.T
                },
                // 评价商品
                setEvaluates() {
                    if (!this.workPac.T > 0) {
                        this.$message({
                            message: "请点击星星打分",
                            type: 'warning'
                        });
                        return false;
                    } else {
                        this.loading1 = true;
                        let data = {
                            goods_id: this.goodsDetials.id,
                            goods_name: this.goodsDetials.title,
                            content: this.content,
                            average_star: this.workPac.T,
                        };
                        apiAjax("{{ route('home.goods.goodsEvaluatesApi')}}", 'post', data, (res) => {
                            this.loading1 = false;
                            if (res.code == 0) {
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                                this.reset();
                                this.getDetails();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        }, (erro) => {
                            this.loading1 = false;
                        });
                    }
                },
                reset() {
                    this.content = "";
                    this.workPac = {
                        T: 0,
                        F: 5,
                    };
                    this.workContent = {
                        T: 0,
                        F: 5,
                    };
                    this.workManner = {
                        T: 0,
                        F: 5,
                    }
                },
                addGoodsNum(type) {
                    if (type == '+') {
                        this.goodsNum += 1;
                    } else {
                        if (this.goodsNum <= 1) {

                        } else {
                            this.goodsNum -= 1;
                        }
                    }
                },
                addShoping() {
                    let data = {
                        store_id: this.goodsDetialsStore.id,
                        store_name: this.goodsDetialsStore.store_name,
                        goods_id: this.goodsDetials.id,
                        goods_name: this.goodsDetials.title,
                        goods_img: this.goodsDetials.thumb,
                        goods_price: this.goodsDetials.price,
                        num: this.goodsNum,
                        type: 1
                    }
                    apiAjax("{{ route('home.cart.cartAddApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.centerDialogVisible = true;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
            }
        })
    })
</script>
@endsection